{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load  sizeformat %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'network/vlan_list.css' %}">
{% endblock %}
{% block title %}{% translate 'VLAN信息' %}{% endblock %}

{% block boby %}
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>{% translate 'VLAN信息' %}</strong></span>
            </div>
            <div class="card-body">
                <table class="table table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                    <thead class="thead-light">
                    <tr>
                        <th>{% translate '名称' %}</th>
                        <th>{% translate '子网IP地址' %}</th>
                        <th>{% translate '子网掩码' %}</th>
                        <th>{% translate '网关' %}</th>
                        <th>{% translate '子网IP地址' %}(ipv6)</th>
                        <th>{% translate '子网掩码' %}(ipv6)</th>
                        <th>{% translate '网关' %}(ipv6)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>{{ vlan.name }}</th>
                        <th>{{ vlan.subnet_ip }}</th>
                        <th>{{ vlan.net_mask }}</th>
                        <th>{{ vlan.gateway }}</th>
                        <th>{{ vlan.subnet_ip_v6 }}</th>
                        <th>{{ vlan.net_mask_v6 }}</th>
                        <th>{{ vlan.gateway_v6 }}</th>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-header">
                <span class="card-title"><strong>{% translate '生成子网主机IP地址列表' %}</strong></span>
                <!-- <span><a class="btn btn-xs btn-primary pull-right" href="">
                    <span class="glyphicon glyphicon-plus"></span>全部导入
                </a></span> -->
            </div>
            <div class="card-body" style="">
                <form id="form-add" role="form" class="form-horizontal" method="post" action="{% url 'network:vlan_add' %}">
                    {% csrf_token %}
                    <div class="input-group" style="">
                        <div class="input-group-prepend">
                            <label class="input-group-text">起始IP地址</label>
                        </div>
                        <input name="start_ip" class="form-control" type="text" value="" placeholder="输入起始IP地址"/>
                        <div class="input-group-prepend">
                            <label class="input-group-text">结束IP地址</label>
                        </div>
                        <input name="end_ip" class="form-control" type="text" value="" placeholder="输入结束IP地址"/>
                        <div class="input-group-append">
                            <button id="generate" type="submit" class="btn btn-primary form-control">{% translate '生成' %}</button>
                        </div>
                        <button id="import" type="submit" class="btn btn-info"><i class="fa fa-plus"></i>{% translate '全部导入' %}</button>
                        <input name="vlan_id" hidden value="{{ vlan.id }}"/>
                        <input id="flag" name="write_database" hidden value=""/>
                    </div>
                </form>
                <table id="table-add" class="table table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                    <tr>
                        <th>{% translate '主机名称' %}</th>
                        <th>{% translate 'IP地址' %}</th>
                        <th>{% translate 'MAC地址' %}</th>
                    </tr>
{#                    <!-- {% for macip in macips %}#}
{#                    <tr>#}
{#                        <th>{{ macip. }}</th>#}
{#                        <th>{{ macip. }}</th>#}
{#                        <th>{{ macip. }}</th>#}
{#                    </tr>#}
{#                    {% endfor %} -->#}
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'network/jquery.form.js' %}"></script>
    <script type="text/javascript" src="{% static 'network/vlan_add.js' %}"></script>
{% endblock %}

